<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>demo</title>
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                'jquery': 'js/jquery-1.11.0.min',
                'databind': '../src/jquery.databind'
            }
        });
    </script>
    <style type="text/css">
        li span {
            padding: 10px;
        }
    </style>
</head>
<body>
<ul class="databind"
    data-url="tree.json"
    data-tpl="tree-tpl"
    data-before_create="init"
>
</ul>

<ul id="data">
</ul>

<ul id="data1">
</ul>

<script type="text/html" id="tree-tpl">
    <li>
        <span>${name}</span>
        <span>${gender}</span>
        <span>${time}-${date}</span>
        <span d-if="status != null">${status.value}</span>
        <span d-if="tree != null">
            <select name="tree">
                <option d-for="tree" value="#{id}" #{checked}>#{name}</option>
            </select>
        </span>
        <span><input type="text" value="${fee}"></span>
    </li>
</script>
<script type="text/html" id="option-tpl">
    <option>${name}</option>
</script>
<script type="text/javascript">
    function init(params) {
        params['date'] = new Date().getTime();
    }

    require(['jquery', 'databind'], function () {
        function load(id) {
            $('#' + id).databind('load', {
                tpl: 'tree-tpl',
                url: 'tree.json',
                beforeCreate: function (val, id) {
                    console.log('beforeCreate', val, id);
                },
                afterCreate: function () {
                    console.log('afterCreate', this);
                }
            });
        }

        load('data');
        load('data1');
    });
</script>
</body>
</html>
